<template>
    <div>
      <input type="file" @change="handleFileChange">
      <img :src="imageUrl" v-if="imageUrl">
    </div>
  </template>
  
  <script>
  export default {
    name: 'AvatarUpload',
    data() {
      return {
        imageUrl: null
      };
    },
    methods: {
      handleFileChange(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.imageUrl = reader.result;
        };
      }
    },
    watch: {
      imageUrl(newValue) {
        this.$emit('input', newValue);
      }
    }
  };
  </script>
  
  <style>
  /* 样式代码 */
  </style>
  